"use client"
import React from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { ChevronRight } from "lucide-react"

// 面包屑路径映射
const pathMap: Record<string, string> = {
  "/dashboard": "仪表盘",
  "/dashboard/data": "数据管理",
  "/dashboard/reports": "报表分析",
  "/dashboard/users": "用户管理",
  "/dashboard/settings": "系统设置"
}

/**
 * 面包屑
 */
const Breadcrumb = () => {
  // 当前路径
  const pathname = usePathname()

  // 获取当前路径段
  const pathnames = pathname.split("/").filter((x) => x)

  // 构建面包屑路径
  const breadcrumbs = pathnames.map((path, index) => {
    const to = `/${pathnames.slice(0, index + 1).join("/")}`
    return { to, label: pathMap[to] || path }
  })

  return (
    <nav className="flex">
      <ol className="inline-flex items-center space-x-1 md:space-x-2">
        <li className="inline-flex items-center">
          <Link
            href="/dashboard"
            className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
          >
            工作台
          </Link>
        </li>
        {breadcrumbs.map((breadcrumb, index) => (
          <li key={breadcrumb.to} className="inline-flex items-center">
            <ChevronRight className="w-4 h-4 text-gray-400" />
            {index === breadcrumbs.length - 1 ? (
              <span className="ml-1 text-sm font-medium text-gray-900 dark:text-white">{breadcrumb.label}</span>
            ) : (
              <Link
                href={breadcrumb.to}
                className="ml-1 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
              >
                {breadcrumb.label}
              </Link>
            )}
          </li>
        ))}
      </ol>
    </nav>
  )
}

export default Breadcrumb
